<template>
  <div class="count-flop" :key="compKey">
    <div :class="item != ',' ? 'count-flop-box' : 'count-flop-point'" v-for="(item, index) in value" :key="index">
      <div v-if="item != ',' && item != '-'" class="count-flop-content" :class="['rolling_' + item]">
        <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">{{ item2 }}</div>
      </div>
      <div v-else-if="item == '-'" class="count-flop-content">-</div>
      <div v-else class="count-flop-content">,</div>
    </div>
    <div v-if="suffix" class="count-flop-box">{{ suffix }}</div>
  </div>
</template>
<script>
export default {
  name: 'CountFlop',
  data () {
    return {
      value: [],
      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      compKey: 0
    }
  },
  props: ['val', 'suffix'],
  watch: {
    val () {
      this.value = this.val.toString().split('')
      this.compKey += 1
    }
  },
  created () {
    this.value = this.val.toString().split('')
  }
}
</script>
<style scoped lang="less">
/* @font-face {
  font-family: "UnidreamLED";
  src: url("../../static/fonts/UnidreamLED.ttf") format("truetype");
} */

.count-flop {
  display: inline-block;
  font-size: 0;
  height: 80px;
  line-height: 80px;
  font-size: 36px;
  /* 中间符号的颜色 */
  color: #000;
  font-size: 0;
}

.count-flop>div {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%;
}

.count-flop-box {
  margin-right: 7px;
  width: 40px;
  line-height: 80px;
  /* 数字的颜色 */
  color: #ffdc4e;
  position: relative;
  font-size: 36px;
}

.count-flop-box:last-child {
  margin: 0;
}

.count-flop-box::after,
.count-flop-box::before {
  display: inline-block;
  content: "";
  width: 40px;
  height: 38px;
  /* 背景图的颜色 */
  background: rgba(135, 255, 197, 0.5);
  position: absolute;
  left: 0;
}

.count-flop-box::after {
  top: 0;
}

.count-flop-box::before {
  bottom: 0;
}

.count-flop-point {
  margin-right: 5px;
  width: 10px;
}

.count-flop-content {
  font-family: "UnidreamLED", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation-fill-mode: forwards !important;
  font-size: 46px;

  // 更改数字的大小
  // .count-flop-num {
  //   font-size: 18px;
  // }
}

.rolling_0 {
  animation: rolling_0 2.1s ease;
}

@keyframes rolling_0 {
  from {
    transform: translateY(-90%);
  }

  to {
    transform: translateY(0);
  }
}

.rolling_1 {
  animation: rolling_1 3s ease;
}

@keyframes rolling_1 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

.rolling_2 {
  animation: rolling_2 2.1s ease;
}

@keyframes rolling_2 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-20%);
  }
}

.rolling_3 {
  animation: rolling_3 3s ease;
}

@keyframes rolling_3 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-30%);
  }
}

.rolling_4 {
  animation: rolling_4 2.1s ease;
}

@keyframes rolling_4 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-40%);
  }
}

.rolling_5 {
  animation: rolling_5 3s ease;
}

@keyframes rolling_5 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

.rolling_6 {
  animation: rolling_6 2.1s ease;
}

@keyframes rolling_6 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-60%);
  }
}

.rolling_7 {
  animation: rolling_7 3.1s ease;
}

@keyframes rolling_7 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-70%);
  }
}

.rolling_8 {
  animation: rolling_8 2.1s ease;
}

@keyframes rolling_8 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-80%);
  }
}

.rolling_9 {
  animation: rolling_9 3.6s ease;
}

@keyframes rolling_9 {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-90%);
  }
}
</style>
